
<template>
    <div style="margin: 5px 0 0 20px">
        <h2>创建命名空间</h2>
        <Form ref="namespace" :rules="rules"  label-position="left" :label-width="100">
            <FormItem label="项目名称" prop="project_name">
                <Select v-model="project_name" @on-change="project_change" style="width:200px">
                    <Option v-for="item in project_list" :value="item" :key="item">{{ item }}</Option>
                </Select>
            </FormItem>
            <FormItem label="环境名称" prop="env_name">
                <Select v-model="env_name" @on-change="env_change" style="width:200px">
                    <Option v-for="item in env_list" :value="item" :key="item">{{ item }}</Option>
                </Select>
            </FormItem>
            <FormItem label="集群名称" prop="cluster">
                <Select v-model="cluster" style="width:200px">
                    <Option v-for="item in cluster_list" :value="item" :key="item">{{ item }}</Option>
                </Select>
            </FormItem>
            <FormItem label="isito注入" prop="istio_inject">
                <Checkbox v-model="istio_inject">{{istio_inject}}</Checkbox>
            </FormItem>
        </Form>
        <Button  size="default"  @click="create_ns">提交</Button>
        <!-- {{ create_result }} -->
    </div>
</template>

<script>

import {k8s_cluster_post} from '@/api/http'
import { post } from '@/api/http'
import store from '@/store';
import { get_env_by_project,get_cluster_by_env,create_namespace,get_project_env,get_namespace_name_list } from  '@/api'


export default {
    data() {
        return {
            // namespace: '',
            rules: {

            },
            project_list: [],
            project_name: '',

            env_list: [],
            env_name: '',

            cluster_list: [],
            cluster: '',

            istio_inject: false,
        }
    },
    methods: {
        // 获取集群信息
        get_cluster(){
            let  env_name = this.env_name
            let data =  JSON.stringify({"env_name":env_name})
            post(get_cluster_by_env,data).then(response=>{
                let  cluster_list  = response.data
                    if(cluster_list){
                    console.log('获取到集群信息为:',cluster_list)
                    if(cluster_list.length > 0){
                        this.cluster_list = cluster_list
                        this.cluster = cluster_list[0]
                    }
                }
            }) 
        },
        // 项目改变需要获取环境，然后根据环境获取集群
        project_change(){
            let data =  JSON.stringify({"project_name":this.project_name})
            post(get_env_by_project,data).then(response=>{
                let  env_list = response.data
                if(env_list){
                    if(env_list.length > 0){
                        this.env_list = env_list
                        this.env_name = env_list[0]
                    }
                } 
                // 获取集群
                this.get_cluster()
            })
        },

        env_change(){
            this.get_cluster()
        },
        get_project() {
            post(get_project_env).then( (response) => {
                this.project_list = response.data.project_names
                this.project_name = this.project_list[0]
                this.env_list = response.data.env_name_list
            })
        },
        update_namespace_list(){
            let cluster = store.state.clusterName
            let headers = {'cluster_name':cluster}
            post(get_namespace_name_list,{},headers).then(response => {
                let namespace_list = response.data
                store.setNamespaceList(namespace_list)
            })
        },
        // 创建ns点击事件
        create_ns(){
            let istio_inject = "off"
            if(this.istio_inject){
                istio_inject = "on"
            }
            let data = {
                "project_name":this.project_name,
                "env_name":this.env_name,
                "cluster_name":this.cluster,
                "istio_inject":istio_inject
            }
            k8s_cluster_post(create_namespace,data).then( (response) => {
                this.$Message.info(JSON.stringify(response.data))
                this.update_namespace_list()
            })
        },
    },
    mounted: function() {
        this.get_project()
    }
}
</script>
<style scoped>

</style>